import React, { Component } from 'react';
import { Table  } from 'antd';
import 'antd/dist/antd.css';//需要添加样式才行
//import {findCourseList} from '../utils/api';
import { Button } from 'antd';
import { EditOutlined } from '@ant-design/icons';

class NewCourseTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            teachernumber:this.props.teachernumber||'1',
            term:this.props.term||'2020-2021第一学期',
            data:[],
            columns:[
                {
                    title: '学期',
                    dataIndex: 'term',
                },
                {
                    title: '课程名',
                    dataIndex: 'coursename',
                },
                {
                    title: '课程类型',
                    dataIndex: 'coursekind',
                },
                {
                    title: '录入状态',
                    dataIndex: 'status',
                    render:(text,record)=>{
                        for(let classnumber in record.classlist){
                            if(record.classlist[classnumber] in [0,2]){
                                return '未录入';//有一个班级未录入完或者暂存，都视作未录入
                            }
                        }
                        return '已录入'
                    }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    render:(text,record)=>
                    <div>
                        <Button
                            type='primary'
                            shape='round'
                            icon={<EditOutlined />}
                            onClick={(e)=>this.handleInputBtnClick(e,record)}
                        >
                            录入成绩
                        </Button>
                        <Button
                            type='primary'
                            shape='round'
                            icon={<EditOutlined />}
                            onClick={(e)=>this.handleAnalyseBtnClick(e,record)}
                        >
                            成绩分析
                        </Button>

                    </div>
                },
            ],

        }
    }

    /**
     * 初始化数据
     */
    componentDidMount() {
        /*
        findCourseList({
            tool1:this.state.teachernumber,//职工号
            tool2:this.state.term,//学期
        })
        .then(
            (data)=>{
                this.setState({
                    data:data
                })
            }
        )
        */
       //测试数据
       this.setState({
           data:[{
            "_id": "5f4e1e3102e91822e86f38da",
            "courseid": "2.1",
            "coursenumber": "2",
            "coursekind": "必修课",
            "coursename": "软件详细设计",
            "teachernumber": "1",
            "assessmentmethod": "考试",
            "classlist": {
                "2017240206":0,
                "2017240207":0,
            },
            "term": "2020-2021第一学期",
            "gradepecents": null
        }]
       })
    }
    
    /**
     * 处理“录入成绩”按钮点击事件
     * @param {当前行的数据} record
     */
    handleInputBtnClick = (event,record)=>{
        //console.log(record);
        //路由跳转
        this.props.history.push({
            pathname:'/NewClassTable',
            query:record
        });

    }

    /**
     * 处理“成绩分析”按钮点击事件
     * @param {当前行的数据} record
     */
    handleAnalyseBtnClick = (event,record)=>{
        //console.log(record);
        //路由跳转
        this.props.history.push({
            pathname:'/NewClassTable',//TODO 改为成绩分析组件的路由
            query:record
        });

    }



    render() { 
        return ( 
            <Table 
            columns={this.state.columns} 
            dataSource={this.state.data} 
            rowKey={(record)=>record['_id']}//使用_id作为行key
            />
         );
    }
}
 
export default NewCourseTable;